<template>
  <div>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>文件</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'productList' }">
              项目列表
            </router-link>
          </li>
          <li class="active">
            <strong>文件</strong>
          </li>
        </ol>
      </div>
    </div>
    <div class="wrapper wrapper-content  animated fadeInUp">

        <div class="ibox">
          <div class="ibox-title">
              <h5></h5>
              <div class="ibox-tools">
                <router-link :to="{ name: 'fileNew' }" class="btn btn-primary btn-xs">
                  添加文件
                </router-link>
              </div>
          </div>
          <div class="ibox-content">

            <div class="row m-b-sm m-t-sm file-list">
                <div class="col-lg-1 col-md-1 col-sm-12 margin-top-5px">
                  <span>
                    权限
                  </span>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-12 margin-top-5px">
                  <span>
                    文件名
                  </span>
                </div>
                <div class="col-lg-2 col-md-7 col-sm-12 margin-top-5px">
                  <span>
                    描述
                  </span>
                </div>
                <div class="col-lg-1 col-md-offset-1 col-md-2 col-sm-12 margin-top-5px">
                  <span>
                    状态
                  </span>
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                  <span>
                    占用者
                  </span>
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                    最后更新
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                  <span>
                    创建用户
                  </span>
                </div>
                <div class="col-lg-2 col-md-3 col-sm-12 margin-top-5px">
                  <span>
                    操作
                  </span>
                </div>
            </div>

            <div class="row m-b-sm m-t-sm file-list" v-for="item in fileList">
                <div class="col-lg-1 col-md-1 col-sm-12 margin-top-5px">
                  <span class="label" :class="{ 'label-primary': item.filepermissions == 1, 'label-warning': item.filepermissions == 0 }">
                    {{ config.ProductPermissionsList[item.filepermissions] }}
                  </span>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-12 margin-top-5px">
                  <a :href="'/file/download.do?fileName=' + item.filename + '&type=1'" class="text-navy" style="word-break:break-all;">
                    {{ item.filenameshow }}
                  </a>
                  &nbsp;&nbsp;
                  <!-- 自己&私有文件&未占用可以编辑 -->
                  <router-link v-if="item.userid == userId && item.filepermissions == 0 && item.status != 2" :to="{ name: 'fileEdit', params: { fileId: item.id } }" class="text-navy">
                    编辑 <i class="fa fa-edit"></i>
                  </router-link>
                  <!-- 被自己占用的 -->
                  <router-link v-if="item.occupantuserid == userId && item.status == 2" :to="{ name: 'fileEdit', params: { fileId: item.id } }" class="text-navy">
                    编辑 <i class="fa fa-edit"></i>
                  </router-link>

                  <!-- <br/><span>{{ item.userid }}</span> -->
                </div>
                <div class="col-lg-2 col-md-7 col-sm-12 margin-top-5px">
                  <span style="word-break:break-all;">
                    {{ item.filedescription }}
                  </span>
                </div>
                <div class="col-lg-1 col-md-offset-1 col-md-2 col-sm-12 margin-top-5px">
                    {{ config.fileStatus[item.status] }}
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                    {{ item.status == 0 ? '无' : item.occupantusername }}
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                    {{ item.updateusername }}
                </div>
                <div class="col-lg-1 col-md-2 col-sm-12 margin-top-5px">
                    {{ item.username }}
                </div>
                <div class="col-lg-2 col-md-3 col-sm-12 margin-top-5px">
                  <!-- 被自己占用的场合 -->
                  <a v-if="item.status == 2 &&　item.occupantuserid == userId && item.filepermissions == 1" class="btn btn-white btn-sm" v-on:click="checkout(item.id)">
                    释放
                  </a>
                  <!-- 文件正常的情况下 -->
                  <a v-if="item.status == 0 && item.filepermissions == 1" class="btn btn-white btn-sm" v-on:click="checkin(item.id)">
                    占用
                  </a>
                  <!-- 文件被自己锁定的场合 -->
                  <a v-if="item.status == 1 &&　item.occupantuserid == userId && item.filepermissions == 1" class="btn btn-white btn-sm" v-on:click="lock(item.id), true">
                    解锁
                  </a>
                  <!-- 文件正常状态公开自己的场合 -->
                  <a v-if="item.status == 0 && item.filepermissions == 1 && item.userid == userId" class="btn btn-white btn-sm" v-on:click="lock(item.id, true)">
                    锁定
                  </a>
                  <router-link :to="{ name: 'FileHistory', params: { fileId: item.id, productId: $route.params.productId } }" class="btn btn-white btn-sm">
                    历史
                  </router-link>
                </div>
            </div>
              
          </div>

      </div>

    </div>
  </div>

</template>

<script>
import server from '@/server/server.js'
import cookie from '@/server/cookie.js'
import $ from 'jquery'
export default {
  name: 'product',
  data () {
    return {
      userId: '',
      fileList: []
    }
  },
  created () {
    this.getFileList()

  },
  mounted () {
  },
  methods: {
    getFileList: function() {
      const vue = this
      vue.userId = cookie.getCookie('id')
      const params = "productId=" + vue.$route.params.productId
      server.get(server.getFileListUrl, null, params, true, false, this, function(data) {
        vue.fileList = data
      })
    },
    checkout: function(id) {
      const vue = this
      const params = {
        fileId: id
      }
      server.post(server.postFileCheckoutUrl, null, params, true, false, this, function(data) {
        vue.$toastr('success', "文件释放成功", '成功')
        vue.getFileList()
      })
    },
    checkin: function(id) {
      const vue = this
      const params = {
        fileId: id
      }
      server.post(server.postFileCheckInUrl, null, params, true, false, this, function(data) {
        vue.$toastr('success', "文件占用成功", '成功')
        vue.getFileList()
      })

    },
    lock: function(id, lockFlag) {
      const vue = this
      const params = {
        fileId: id,
        lock: lockFlag
      }
      server.post(server.postFileLockUrl, null, params, true, false, this, function(data) {
        vue.$toastr('success', "文件锁定成功", '成功')
        vue.getFileList()
      })

    }
  }
}
</script>

<style scoped>
.file-list {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
  padding-top: 5px;
}

.margin-top-5px {
  margin-top: 5px;
}
</style>
